<template>
  <div>
    <el-breadcrumb separator-class="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="5">
          <el-input clearable placeholder="请输入订单编号" v-model="queryInfo.orderNo"></el-input>
        </el-col>
        <el-col :span="5">
          <el-select v-if="customers" clearable v-model="queryInfo.uid" placeholder="请选择客户名称">
            <el-option v-for="item in customers" :key="item.id" :label="item.userName" :value="item.id"></el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-select clearable v-model="queryInfo.orderStatus" placeholder="请选择订单状态">
            <el-option v-for="item in orderStatusList" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="getOrderinfos(0)">查找</el-button>
        </el-col>
      </el-row>
      <!-- 订单列表 -->
      <el-table @expand-change="handleExpandChange" :data="orderlist" border stripe>
        <el-table-column type="expand">
          <template v-slot="scope">
            <!-- 展开行表格 -->
            <el-table :data="scope.row.orderdetails" border stripe>
              <el-table-column type="index"></el-table-column>
              <el-table-column label="商品名称" prop="goods.name"></el-table-column>
              <el-table-column label="订单数量" prop="quantity"></el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="订单号" prop="orderNo"></el-table-column>
        <el-table-column label="客户名称" prop="ui.realName"></el-table-column>
        <el-table-column label="订单状态" prop="status"></el-table-column>
        <el-table-column label="订单日期">
          <template v-slot="scope">{{
            timeFormat(scope.row.ordertime)
          }}</template>
        </el-table-column>
        <el-table-column label="订单金额" prop="orderprice"></el-table-column>
        <el-table-column label="操作" width="180px">
          <template v-slot="scope">
            <el-button type="danger" icon="Delete" size="mini"
              @click="handleDeleteOrder(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div v-if="orderlist != null && orderlist.length > 0">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryInfo.curPage" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance();
// 存放订单列表
const orderlist = ref(null);
// 存放订单明细
const orderdetaillist = ref(null);
// 订单总数
const total = ref(0);
// 封装订单查询参数
const queryInfo = reactive({
  orderNo: "",
  uid: "",
  orderStatus: "",
  curPage: 1,
  pageSize: 5,
});
// 客户列表
const customers = ref(null);
// 存放订单状态
const orderStatusList = ref(null);
// 初始订单状态
orderStatusList.value = [
  {
    value: "未付款",
    label: "未付款",
  },
  {
    value: "已付款",
    label: "已付款",
  },
  {
    value: "待发货",
    label: "待发货",
  },
  {
    value: "已发货",
    label: "已发货",
  },
  {
    value: "已完成",
    label: "已完成",
  },
];

// 向后台程序发送get请求，获取订单列表
const getOrderinfos = async (flag) => {
  // 订单客户
  var uid;
  if (queryInfo.uid === "") {
    uid = 0;
  } else {
    uid = queryInfo.uid;
  }
  if (flag == 0) {
    queryInfo.curPage = 1;
  }
  // 分页获取订单列表
  const { data: res } = await proxy.$axios.get("orderinfos", {
    params: {
      uid: uid,
      orderNo: queryInfo.orderNo,
      status: queryInfo.orderStatus,
      curPage: queryInfo.curPage,
      pageSize: queryInfo.pageSize,
    },
  });
  if (res.code != 0) {
    orderlist.value = [];
    return proxy.$message.error("没有订单记录!");
  }
  total.value = res.total;
  res.orderInfos.map((item) => {
    item.orderdetails = [];
  });
  orderlist.value = res.orderInfos;
};

// pageSize改变事件处理函数
const handleSizeChange = (pageSize) => {
  // console.log(pageSize)
  queryInfo.pageSize = pageSize;
  getOrderinfos();
};

// page改变事件处理函数
const handleCurrentChange = (curPage) => {
  // console.log(curPage);
  queryInfo.curPage = curPage;
  getOrderinfos();
};

// 向后台程序发送get请求，获取所有客户
const getValidateCustomers = async () => {
  const { data: res } = await proxy.$axios.get("customers", {
    params: {
      // status: 0,
      status: -1,
    },
  });
  console.log(res.data);
  customers.value = res.data;
};

// 删除订单事件处理函数
const handleDeleteOrder = async (id) => {
  const { data: res } = await proxy.$axios.delete(`orderinfos/${id}`);
  if (res.code != 0) return proxy.$message.error(res.msg);
  getOrderinfos();
  return proxy.$message.success(res.msg);
};

// 处理<el-table> 标签绑定的 expand-change 事件
const handleExpandChange = async (row) => {
  var id = row.id;
  const { data: res } = await proxy.$axios.get(`orderinfos/oid/${id}`);
  console.log(res.orderDetails);
  orderlist.value.forEach((temp, index) => {
    // 找到当前点击的行，把动态获取到的数据赋值进去
    if (temp.id == row.id) {
      orderlist.value[index].orderdetails = res.orderDetails;
    }
  });
};

onMounted(() => {
  getOrderinfos();
  getValidateCustomers();
});


// 计算属性 格式化订单日期

function timeFormat(item) {
  let date = new Date(item);
  let y = date.getFullYear();
  let m = date.getMonth() + 1;
  let d = date.getDate();
  let h = date.getHours();
  let min = date.getMinutes();
  let s = date.getSeconds();
  let result = "";
  result = `${y}-${m < 10 ? "0" + m : m}-${d < 10 ? "0" + d : d}`;
  return result;
};

</script>
<style lang="less" scoped></style>
